import React, { Component } from 'react'

// 导入外部样式，不是通过模块化的方式导入的，而是通过 link 导入的
import './02-style.css'

export default class App extends Component {


    state = {
        flag: true
    }

    // render 会在组件初次渲染，和组件更新阶段执行
    render() {

        // 也可以将条件写在模板外面
        const is = this.state.flag ? 'active' : ""

        return (
            <div>
                {/* className 是用来设置 class 的，因为 class 是系统关键字不能使用 */}

                {/* 通过添加添加 class */}
                {/* <h1 className={this.state.flag ? 'active' : ""} onClick={() => { */}
                <h1 className={is} onClick={() => {

                    // setState 是 react 类组件中唯一修改数据的方法，微信小程序也是如此
                    this.setState({
                        flag: !this.state.flag
                    })

                }}>结婚为了幸福，离婚也是，不结也是。</h1>

            </div >
        )
    }
}
